<div class="page-wrapper d-flex flex-column pt-4 w-100">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        All Posts (<span ng-bind="data.totalItems"></span> items)
                    </h3>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body d-flex flex-row-reverse">
        <aside class="bd-sidebar sub-sidebar">
            <nav class="bd-links p-3" aria-label="Sub-section navigation">
                <div class="card card-body">
                    <post-filter-list request="request" categories="categories" post-types="postTypes"
                        callback="getList(pageIndex)" create-url="createUrl" create-text="'Create Post'">
                    </post-filter-list>
                    <select ng-if="isAdmin" class="form-select" ng-model="selectedList.action">
                        <option ng-repeat="item in actions" ng-value="item">{{item}}</option>
                    </select>
                    <button type="button" class="btn btn-sm btn-primary mt-3"
                        ng-if="selectedList.data.length > 0 && selectedList.action" ng-click="applyList()">
                        Apply
                    </button>
                </div>
            </nav>
        </aside>

        <!-- ----------------------------------------------------------- -->

        <div class="content-body py-3 pe-3">

            <div class="card">
                <div class="card-body">
                    <table class="table table-hover" cellspacing="0">
                        <thead class="thead-light">
                            <tr>
                                <!-- <th ng-if="!canDrag" class="col text-secondary text-xxs font-weight-bolder opacity-7" width="15px">
                                      </th> -->
                                <!-- <th ng-if="!canDrag" class="col text-secondary text-xxs font-weight-bolder opacity-7" width="15px">
                                      </th> -->
                                <th class="col text-secondary text-xxs font-weight-bolder opacity-7">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input"
                                            ng-model="selectedList.isSelectAll"
                                            ng-change="selectAll(selectedList.isSelectAll)" id="customCheck_all" />
                                    </div>
                                </th>
                                <th class="col text-secondary text-xxs font-weight-bolder opacity-7">Post</th>
                                <th class="col text-secondary text-xxs font-weight-bolder opacity-7">
                                    Thumb</th>
                                <th class="col text-secondary text-xxs font-weight-bolder opacity-7">
                                    Feature</th>
                                <th class="col text-secondary text-xxs font-weight-bolder opacity-7">
                                    Created</th>
                                <th class="col text-secondary text-xxs font-weight-bolder opacity-7">
                                    Author</th>
                                <th class="col text-secondary text-xxs font-weight-bolder opacity-7">
                                </th>

                                <th class="col-1 text-secondary text-xxs font-weight-bolder opacity-7">
                                </th>
                            </tr>
                        </thead>

                        <tbody class="sortable" ng-init="initList()">
                            <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="post"
                                sort-model-id="{{item.id}}">
                                <!-- <td ng-if="!canDrag" style="cursor:grab;" class="drag-header align-middle small">
                                          <small class="fa fa-grip-vertical fa-xs text-black-50"></small>
                                      </td> -->
                                <!-- <td ng-if="!canDrag" class="align-middle">
                                          <div class="btn-group-vertical" role="group" aria-label="Basic example">
                                              <button ng-click="goUp(item.childs, $index)" type="button" title="Move up"
                                                  class="btn  btn-xs py-0 border-bottom"><span
                                                      class="fa fa-sort-up small"></span></button>
                                              <button ng-click="goDown(item.childs, $index)" type="button" title="Move down"
                                                  class="btn  btn-xs py-0"><span class="fa fa-sort-down small"></span></button>
                                          </div>
                                      </td> -->
                                <td>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" ng-model="item.isSelected"
                                            ng-change="select(item.id, item.isSelected)" />
                                    </div>
                                </td>
                                <td>
                                    <a href="" ng-click="goToPath('/portal/post/details/' + item.id)" class="btn-link"
                                        title="{{item.title}} - {{item.excerpt}}" data-bs-toggle="tooltip"
                                        ng-bind="item.title|trim:200">

                                    </a>
                                </td>
                                <td>
                                    <preview-image img-height="25" img-src="item.thumbnailUrl"></preview-image>
                                </td>
                                <td>
                                    <preview-image img-height="25" img-src="item.imageUrl"></preview-image>
                                </td>
                                <td class="text-black-50">
                                    <small>
                                        {{item.createdDateTime | utcToLocal:'dd.MM.yy hh:mm a'}}
                                    </small>
                                </td>
                                <td class="text-black-50">
                                    <small>{{item.createdBy}}</small>
                                </td>
                                <td class="text-black-50">
                                    <small ng-if="item.status == 'Published'">🟢</small>
                                    <small ng-if="item.status == 'Schedule'">🟡</small>
                                    <small ng-if="item.status == 'Draft'">🔴</small>
                                    <small ng-if="item.status == 'Deleted'">⚫️</small>
                                </td>

                                <td>
                                    <div class="dropdown float-lg-end ms-auto pe-1">
                                        <a href="javascript:;" class="cursor-pointer" id="dropdownTable2"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fa fa-ellipsis-h text-secondary" aria-hidden="true"></i>
                                        </a>
                                        <ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5"
                                            aria-labelledby="dropdownTable2" style="">
                                            <li><a href="/portal/post/details/{{item.id}}"
                                                    class="dropdown-item border-radius-md">
                                                    <span class="fas fa-pen"></span> Edit
                                                </a>
                                            </li>
                                            <li><a href="" ng-click="preview(item)" target="_blank"
                                                    class="dropdown-item border-radius-md">
                                                    <span class="fas fa-eye"></span> Preview
                                                </a>
                                            </li>
                                            <li><a href="" class="dropdown-item border-radius-md"
                                                    ng-click="duplicate(item.id)">
                                                    <span class="fas fa-copy"></span> Copy post
                                                </a></li>
                                            <li><a href="" ng-click="remove(item.id);"
                                                    class="dropdown-item border-radius-md text-danger">
                                                    <i class="fas fa-trash-alt"></i> Delete
                                                </a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-body">
                    <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                        ul-class="pagination justify-content-end m-0" a-class="page-link"
                        paging-action="getList(page-1)" scroll-top="true">
                    </paging>
                </div>
            </div>

        </div>
    </div>
</div>